<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, anchor, link, in-page, navigation, hash" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>Anchor Link Scrolling - Examples - ScrollMagic</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="../../assets/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/style.css" type="text/css">
	<link rel="stylesheet" href="../../assets/css/examples.css" type="text/css">
	<link rel="shortcut icon" href="../../assets/img/favicon.ico" type="image/x-icon">

	<script type="text/javascript" src="../../assets/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="../../assets/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="../../assets/js/examples.js"></script>
	
	<script type="text/javascript" src="../../assets/js/lib/gsap3/gsap.min.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="../../scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
	<ul id="menu"></ul>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1 class="badge gsap">Anchor Link Scrolling</h1>
						<h2>Mastering in-page navigation.</h2>
						<p>If you have a long page and you want to use anchor links to allow your users to navigate it you might want to scroll to the respective position, instead of jumping to it. After all you put a lot of effort in to all those animations and you want the user to see them...</p>
						<p>The best way to achieve this is to use the TweenMax ScrollToPlugin and change the behaviour of all anchor links. (remember to load the necessary plugin file)</p>
						<a href="#" class="viewsource">view source</a>
					</div>
				</section>
				<section class="demo">
					<form class="move">
						<fieldset>
							<legend>Anchor Links</legend>
							<p><a href="#top">Top</a></p>
							<p><a href="#middle">Middle</a></p>
							<p><a href="#bottom">Bottom</a></p>
						</fieldset>
					</form>
					<a id="top"></a>
					<div class="spacer s1"></div>
					<a id="middle"></a>
					<div class="spacer s1"></div>
					<a id="bottom"></a>
					<div class="spacer s0"></div>
					<div id="animate" class="box1 blue">
						<p>Peek-a-boo!</p>
						<a href="#" class="viewsource">view source</a>
					</div>
					<div class="spacer s2"></div>
					<script type="text/javascript" src="../../assets/js/lib/greensock/plugins/ScrollToPlugin.min.js"></script>
					<script>
						// init controller
						var controller = new ScrollMagic.Controller();

						// build tween
						var tween = TweenMax.from("#animate", 0.5, {autoAlpha: 0, scale: 0.7});

						// build scene
						var scene = new ScrollMagic.Scene({triggerElement: "a#top", duration: 200, triggerHook: "onLeave"})
										.setTween(tween)
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);

						// change behaviour of controller to animate scroll instead of jump
						controller.scrollTo(function (newpos) {
							TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
						});

						//  bind scroll to anchor links
						$(document).on("click", "a[href^='#']", function (e) {
							var id = $(this).attr("href");
							if ($(id).length > 0) {
								e.preventDefault();

								// trigger scroll
								controller.scrollTo(id);

									// if supported by the browser we can even update the URL.
								if (window.history && window.history.pushState) {
									history.pushState("", document.title, id);
								}
							}
						});
					</script>
				</section>
				<div class="spacer s_viewport"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../assets/js/tracking.js"></script>
</body>
</html>
